<template>
	<view>
		<view class="content">
			<u-row gutter="16" justify="space-between">
				<u-col span="9">
					<view>
						<text class="title">蜜雪冰城(水田路店)</text>
						<u-icon name="arrow-down" size="30"></u-icon>
						<text class="distance">距离你477m</text>
					</view>
				</u-col>
				<u-col span="3">
					<view>
						<selectSwitch @change="changeSwitch" :switchList="list" checked_bj_color="#dd6161"/>
					</view>
				</u-col>
			</u-row>
			<view class="addres">
				<u-icon name="map" size="30"></u-icon>
				山东省临沂市兰山区水田路与临西六路交汇处向东150米
			</view>
		</view>
	</view>
</template>

<script>
	import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
	export default {
		components:{
			selectSwitch
		},
		data() {
			return {
				list:['外卖','自取']
			}
		},
		methods: {
			changeSwitch(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	.title{
		font-size: 30rpx;
		font-weight: bold;
	}
	.distance{
		margin-left: 20rpx;
		color: #fcbd71;
	}
	.addres{
		font-size: 20rpx;
		color: #c0c4cc;
		margin: 10rpx 0rpx;
	}
</style>
